import React, { Component, PureComponent } from 'react';
import { Button, Card, Form, Row, Col, Input, Select, DatePicker } from 'antd';

const { Item } = Form;
const { Option } = Select;

@Form.create()//修饰器
class Child extends PureComponent {
    state = {}
    //生命周期
    componentDidMount() {
        //form 是子类@Form.create() 加入的
        const { getForm, form } = this.props;
        if (typeof getForm === 'function') getForm(form);
        // console.log(22)
    }

    render() {
        // console.log(3)
        const { customerName, form } = this.props;
        const { getFieldDecorator } = form; 
        return (
            <Card>
                <Form>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Item label='员工姓名'>
                                {
                                    getFieldDecorator('name')(
                                        <Input placeholder='请输入员工姓名' onChange={this.handleChangeName} />
                                    )
                                }
                            </Item>
                        </Col>
                        <Col span={8}>
                            <Item label='员工性别'>
                                {
                                    getFieldDecorator('sex')(
                                        <Select placeholder='请选择'>
                                            <Option key={1} value={1}>男</Option>
                                            <Option key={2} value={2}>女</Option>
                                        </Select>
                                    )
                                }
                            </Item>
                        </Col>
                        <Col span={8}>
                            <Item label='入职时间'>
                                {
                                    getFieldDecorator('time')(
                                        <DatePicker style={{ width: '100%' }} />
                                    )
                                }
                            </Item>
                        </Col>
                    </Row>
                </Form>
            </Card>
        );
    }
}

export default Child;